<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"><title>下拉菜单</title><style>
    /*209000851 朱海                           */
     #app {
      width: 1650px;
      height: 832px;
      position: relative;
      margin: 0 auto;
      box-sizing: border-box;
      border: 1px solid #c9c9c9;
    }
body {
       width:1600px;
}
a{
    color: #eb0b29;
    font-size: 15px;
}
li{
    list-style-type: none;
}

#app > li{
    list-style-type: none;
    float: left;
    text-align: center;
    position: relative;

}
#app li a:hover{
    color: #fff;
    background:#FF8C69;
}
#app li ul{
    position: absolute;
    left: -40px;
    top:80px;
    margin-top: 1px;
    font-size: 12px;
}
[v-cloak]{
    display: none;
}

.mydiv{
    color: #333;
    border: 0;
    font: normal 12px "Microsoft YaHei","宋体";
    list-style: none;
    margin-top: -130px;
    margin-right:400px ;
    padding: 0;
    -webkit-text-size-adjust: none;
    text-align: right;
    float: right;
    animation-duration: 1s;
    animation-fill-mode: both;
    visibility: visible;
    animation-delay: 0.4s;
    animation-name: bounceInRight;
    position: relative;
}
</style>
</head><body>
    <div id = "app" v-cloak>
        <div class="header">
            <div class="header-main">
                <div class="clearBoth20" ></div>
                <div class="header-top" style="height:150px; background-color: #c9c9c9;">
                    <img src="images/logo.png" alt="">
                </div>
                <div class="mydiv" data-wow-delay="0.4s" style="visibility: visible;">
                    <div class="header-guide" ><a href="/cont/4585.html" target="_blank"><img src="images/icon-18.png"></a></div>
                    <div class="header-link"><p><a onclick="SetHome(window.location)" href="javascript:void(0)">设为首页</a>|<a onclick="AddFavorite(window.location,document.title)" href="javascript:void(0)">加入收藏</a>|<a href="javascript:void(0)">热线：023-65312300（沙坪坝片区）023-63303457（渝中片区）</a>|<a target="_blank" href="/Index/enindex">English</a></p></div>
                    <div class="clearBoth10"></div>
                    <div class="search">
                       <form name="search_con" id="search_con" class="form-search form-horizontal" method="post" action="/index/search_con.html">
                        <input class="search-text" style="height: 25px;"  placeholder="请输入搜索关键词" type="text" name="key" id="key" value="">
                        <span><button style="background-color: rgb(201, 100, 100);height: 33px; width: 100px;"  >搜索</button></span>
                        </form> 
                    </div>
                </div>
            </div>
    </div>
    <li v-for="menu in menus" @mouseover="menu.show = !menu.show"@mouseout="menu.show = !menu.show">
    <a :href="menu.url"  style="text-decoration: none;display: block;color:#fff;width:140px;height: 80px;line-height:40px;border: 1px solid #fff; border-width: 1px 1px 0 0;background:#eb0b29;font-size: 25px;">
    {{menu.name}}<br/>     
    {{menu.english}}
    </a>
    <ul v-show="menu.show">
    <li v-for="subMenu in menu.subMenus">
    <a :href="subMenu.url" style="text-decoration: none;display: block;color:#fff;width:140px;height: 80px;line-height:40px;border: 1px solid #fff; border-width: 1px 1px 0 0;background:#eb0b29;font-size: 20px;">{{subMenu.name}}</a>
    </1i></ul></1i></li>
    <div>
        <img style="width: 100% ;"  src="images/2.jpg" alt=""  >
</div>
</div>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
    const data = {
    menus:[
    {
    name:'   ',english:'  ',url:'#',show:false, 
    },
    {
    name:'首页',english:'Home',url:'#',show:false, 
    },
        {
    name:'关于红岩',english:'HongYan',url:'#',show:false, subMenus:[
    {name:'红岩文化',url:'#'},
    {name:'博物馆机构',url:'#'},
    {name:'历史沿革',url:'#'}
    ]
    },
    {
name:'公告动态',english:'Dynamics',url:'#',show:false, subMenus:[
           {name:'文博信息',url:'#'},
           {name:'政务平台',url:'#'},
           {name:'公告',url:'#'},
           {name:'专题报道',url:'#'}
    ]
    },
    {
name:'馆藏精品',english:'Collections',url:'#',show:false, subMenus:[
          {name:'一级文物',url:'#'},
          {name:'二级文物',url:'#'},
          {name:'三级文物',url:'#'}
    ]
    },
    {
name:'陈列展览',english:'Exhibition',url:'#',show:false, subMenus:[
        {name:'虚拟展览',url:'#'},
        {name:'基本陈列',url:'#'},
        {name:'复原陈列',url:'#'},
        {name:'临时展览',url:'#'},
        {name:'展览交流',url:'#'}
    ]
    },
    {
name:'研究开发',english:'Research',url:'#',show:false, subMenus:[
          {name:'历史研究',url:'#'},
          {name:'艺术创作',url:'#'},
          {name:'影音在线',url:'#'},
          {name:'文创产品',url:'#'}
    ]
    },
    {
name:'公共教育',english:'Education',url:'#',show:false, subMenus:[
          {name:'党性教育',url:'#'},
          {name:'爱国主义交育',url:'#'},
          {name:'研学实践教育',url:'#'},
          {name:'科普教育',url:'#'}
    ]
    },
    {
name:'参观服务',english:'Service',url:'#',show:false, subMenus:[
          {name:'景点介绍',url:'#'},
          {name:'服务内容',url:'#'},
          {name:'网上预约',url:'#'},
          {name:'志愿服务',url:'#'}
    ]
    },
    {
name:'网上预约',english:'Reservations',url:'#',show:false,
    },
    {
    name:' ',english:' ',url:'#',show:false, 
    },
    ]
    };
const vm = Vue.createApp({
data() {
return data;
}
}).mount('#app');</script>
</body>
</html>

    